import 'package:development_assistant/controller/test_controller.dart';
import 'package:development_assistant/model/test_api.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../../config/colors.dart';
import '../../../../config/font.dart';
class AddApi extends StatelessWidget {
  final TestController testController=Get.put(TestController());
  AddApi({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _appBar(),
      resizeToAvoidBottomInset: false,
      body: Container(
        padding: EdgeInsets.only(top: 20.h,left: 20.w,right: 20.w),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _apiName(),
            SizedBox(height: 15.h,),
            _selectMethod(),
            SizedBox(height: 15.h,),
            _urlField(),
            SizedBox(height: 15.h,),
            _paramView(),
            _saveApi()
          ],
        ),
      ),
    );
  }

  _saveApi(){
    return Center(
      child: SizedBox(
        width: 200.w,
        height: 35.h,
        child: ElevatedButton(
          onPressed: (){
            TestApi testApi=TestApi(0, testController.apiName.value, testController.apiMethod.value, testController.apiUrl.value);
            testController.testApi.add(testApi);
            testController.testParams.add(testController.apiParams);
            testController.testHeaders.add(testController.apiHeaders);
            testController.testBody.add(testController.apiBody);
            testController.clear();
            Get.back();
          },
          style: ElevatedButton.styleFrom(
              backgroundColor: ColorsConfig().buttonColorOfTheme,
              foregroundColor: Colors.white,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20)
              )
          ),
          child: Text("保存接口".tr,style: TextStyle(fontWeight: FontWeight.bold),),
        ),
      ),
    );
  }

  _apiName(){
    return SizedBox(
      width: 320.w,
      height: 50.h,
      child: Center(
        child: TextField(
          maxLines: 1,
          decoration: InputDecoration(
              hintText:"接口名称".tr,
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(15),
              )
          ),
          onChanged: (e){
            testController.apiName.value=e;
          },
        ),
      ),
    );
  }

  _selectMethod(){
    return Container(
      width: 320.w,
      height: 50.h,
      padding: EdgeInsets.symmetric(horizontal: 10.w,vertical: 10.h),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15),
          border: Border.all(color: Colors.grey,width: 1)
      ),
      child: DropdownButton(
        hint: Obx(()=>Text(testController.apiMethod.value)),
        items: <String>['GET', 'POST', 'PUT' ,'DELETE'].map((String value) {
          return DropdownMenuItem<String>(
              value: value,
              child: SizedBox(
                width: 270.w,
                child: Text(value,style: const TextStyle(fontSize: 17),),
              )
          );
        }).toList(),
        onChanged: (e){
          testController.apiMethod.value=e!;
        },
        underline: Container(width: 0),
      ),
    );
  }

  _urlField(){
    return SizedBox(
      width: 320.w,
      height: 50.h,
      child: Center(
        child: TextField(
          maxLines: 1,
          decoration: InputDecoration(
              hintText:"接口路径".tr,
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(15),
              )
          ),
          onChanged: (e){
            testController.apiUrl.value=e;
          },
        ),
      ),
    );
  }

  _paramView(){
    TextEditingController bodyEditingController=TextEditingController();
    List<Widget> tabs=[
      Container(
        width: 100.w,
        height: 30.h,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: ColorsConfig().buttonColorOfTheme
        ),
        child: const Center(child: Text("Params")),
      ),
      Container(
        width: 100.w,
        height: 30.h,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: ColorsConfig().buttonColorOfTheme
        ),
        child: const Center(child: Text("Body")),
      ),
      Container(
        width: 100.w,
        height: 30.h,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: ColorsConfig().buttonColorOfTheme
        ),
        child: const Center(child: Text("Headers")),
      ),
    ];
    List<Widget> tabsView=[
      //QueryList
      Column(
        children: [
          //添加按钮
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text("Query",style: FontConfig.fieldTitle,),
              Transform.scale(
                scale: 0.7,
                child: ElevatedButton.icon(
                  onPressed: (){
                    testController.apiParams.add(
                      {
                        "name":"",
                        "param":""
                      });
                  },
                  icon: const Icon(Icons.add),
                  label: Text("添加".tr),
                  style: ElevatedButton.styleFrom(
                      backgroundColor: ColorsConfig().buttonColorOfTheme,
                      foregroundColor: Colors.white,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10)
                      )
                  ),
                ),
              )
            ],
          ),
          //参数列表
          SizedBox(
              height: 240.h,
              child: Obx(()=>ListView(
                children: List<Widget>.generate(testController.apiParams.length, (index) {
                  return Container(
                    margin: EdgeInsets.only(bottom: 10.h),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        border: Border.all(color:Colors.grey,width: 1)
                    ),
                    child: Row(
                      children: [
                        SizedBox(
                          width: 100.w,
                          child: TextField(
                            decoration: const InputDecoration(
                                hintText: "Name",
                                border: OutlineInputBorder(
                                    borderSide: BorderSide.none
                                )
                            ),
                            onChanged: (e){
                              testController.apiParams[index]['name']=e;
                            },
                          ),
                        ),
                        SizedBox(
                          width: 170.w,
                          child: TextField(
                            decoration: const InputDecoration(
                                hintText: "Param",
                                border: OutlineInputBorder(
                                    borderSide: BorderSide.none
                                )
                            ),
                            onChanged: (e){
                              testController.apiParams[index]['param']=e;
                            },
                          ),
                        ),
                        IconButton(
                            onPressed: (){
                              testController.apiParams.removeAt(index);
                            },
                            icon: const Icon(Icons.delete_outline)
                        )
                      ],
                    ),
                  );
                }),
              ))
          ),
        ],
      ),
      //BodyJson
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text("JSON",style: FontConfig.fieldTitle,),
              Transform.scale(
                scale: 0.7,
                child: ElevatedButton.icon(
                  onPressed: (){
                    bodyEditingController.text="";
                  },
                  icon: const Icon(Icons.cleaning_services_rounded),
                  label: Text("清空".tr),
                  style: ElevatedButton.styleFrom(
                      backgroundColor: ColorsConfig().buttonColorOfTheme,
                      foregroundColor: Colors.white,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10)
                      )
                  ),
                ),
              )
            ],
          ),
          Container(
              height: 240.h,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  border: Border.all(color:Colors.grey,width: 1)
              ),
              child: TextField(
                maxLines: null,
                controller: bodyEditingController,
                decoration: const InputDecoration(
                    border: OutlineInputBorder(
                        borderSide: BorderSide.none
                    )
                ),
                onChanged: (e){
                  testController.apiBody.value=e;
                },
              )
          ),
        ],
      ),
      //HeadersList
      Column(
        children: [
          //添加按钮
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text("Headers",style: FontConfig.fieldTitle,),
              Transform.scale(
                scale: 0.7,
                child: ElevatedButton.icon(
                  onPressed: (){
                    testController.apiHeaders.add(
                        {
                          "header":"",
                          "param":""
                        }
                    );
                  },
                  icon: const Icon(Icons.add),
                  label: Text("添加".tr),
                  style: ElevatedButton.styleFrom(
                      backgroundColor: ColorsConfig().buttonColorOfTheme,
                      foregroundColor: Colors.white,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10)
                      )
                  ),
                ),
              )
            ],
          ),
          //参数列表
          SizedBox(
              height: 240.h,
              child: Obx(()=>ListView(
                children: List<Widget>.generate(testController.apiHeaders.length, (index) {
                  return Container(
                    margin: EdgeInsets.only(bottom: 10.h),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        border: Border.all(color:Colors.grey,width: 1)
                    ),
                    child: Row(
                      children: [
                        SizedBox(
                          width: 100.w,
                          child: TextField(
                            decoration: const InputDecoration(
                                hintText: "Header",
                                border: OutlineInputBorder(
                                    borderSide: BorderSide.none
                                )
                            ),
                            onChanged: (e){
                              testController.apiHeaders[index]["header"]=e;
                            },
                          ),
                        ),
                        SizedBox(
                          width: 200.w,
                          child: TextField(
                            decoration: const InputDecoration(
                                hintText: "Param",
                                border: OutlineInputBorder(
                                    borderSide: BorderSide.none
                                )
                            ),
                            onChanged: (e){
                              testController.apiHeaders[index]["param"]=e;
                            },
                          ),
                        )
                      ],
                    ),
                  );
                }),
              ))
          ),
        ],
      ),
    ];
    return SizedBox(
        width: 350.w,
        height: 350.h,
        child: DefaultTabController(
          length: tabs.length,
          child: Scaffold(
            resizeToAvoidBottomInset: false,
            appBar: TabBar(
              overlayColor: MaterialStateProperty.all<Color>(Colors.transparent),
              indicatorColor: Colors.transparent,
              dividerColor: Colors.transparent,
              labelColor: Colors.white,
              tabs: tabs,
            ),
            body: TabBarView(
              children: tabsView,
            ),
          ),
        )
    );
  }

  _appBar(){
    return AppBar(
      title: Text("添加接口".tr),
      centerTitle: true,
      leading: IconButton(
        onPressed: (){
          Get.back();
        },
        icon: const Icon(Icons.arrow_back),
      ),
    );
  }
}
